<template>
  <div class="prdtItem-wrapper" :class="{'hot-item':hotItemSub === true}">
    <div class="item-wrapper">
      <div class="item-wrapper">
        <div v-for="(item, index) in productlist" :key="item.id" class="item-box">
          <div class="img-wrap">
            <router-link :to="{ name: '/product/detail', query: {id: item.product_id} }">
              <img class="ad-img" :src="constant.api_url + item.thumb">
            </router-link>
          </div>
          <div class="bottom-info">
            <div class="box-l item-title">
              <router-link :to="{ name: '/product/detail', query: {id: item.product_id} }">
                <p>{{item.product_title}}</p>
              </router-link>
            </div>
            <div class="box-r item-price" v-if="hotItemSub">
              <p>
                <span class="icon iconfont icon-fl-renminbi"></span>
                <span class="num-txt">{{item.product_price}}</span>元
              </p>
            </div>
          </div>
          <div class="bottom-feature clearfix" v-if="is_user">
            <div class="box-l">
              <p>
                <span class="icon iconfont icon-yanjing"></span>
                <span class="view-txt">{{item.views}}人已看</span>
              </p>
            </div>
            <div class="box-r">
              <!-- <p class="like-txt">
                <a href="javascript:;" @click="zan(item, index)">
                  <span class="icon iconfont icon-dianzan"></span>
                  <span class="num-txt">{{item.zan_count}}</span>
                </a>
              </p>-->

              <p class="collect-txt">
                <a href="javascript:;" @click="collect(item, index)">
                  <span class="icon iconfont icon-xingxing"></span>
                  <span class="num-txt">{{item.collect_count}}</span>
                </a>
              </p>
            </div>
          </div>
          <div class="bottom-cart clearfix" v-if="!hotItemSub">
            <div class="box-l item-price">
              <p>
                <span class="icon iconfont icon-fl-renminbi"></span>
                <span class="num-txt">{{item.product_price}}</span>元
              </p>
            </div>
            <div class="box-r item-cart">
              <router-link :to="{ name: '/product/detail', query: {id: item.product_id} }">
                <span class="icon iconfont icon-gouwuche"></span>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="submit-box">
      <button v-on:click="product_list" class="submit-btn">下拉加载更多</button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";
export default {
  name: "collectproductItem",

  data() {
    return {
      productlist: [],
      constant: constant,
      p: 0
    };
  },

  mounted() {},

  props: {
    hotItemSub: {
      type: Boolean,
      default: false
    }
  },

  components: {},
  methods: {
    zan(item, index) {
      let id = this.$route.query.id;
      http.get(this, {
        url: "product/zan",
        data: {
          product_id: item.product_id,
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("产品点赞:", data);
          if (data.status == 1) {
            //this.productlist[index] = data.info;
            this.$set(
              this.productlist[index],
              "zan_count",
              data.info.zan_count
            );
          }
        }
      });
    },
    collect(item, index) {
      http.get(this, {
        url: "product/collect",
        data: {
          product_id: item.product_id,
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("产品收藏:", data);
          if (data.status == 1) {
            //this.productlist[index] = data.info;
            this.$set(
              this.productlist[index],
              "collect_count",
              data.info.collect_count
            );
          }
        }
      });
    },
    product_list() {

      this.p++;
      http.get(this, {
        url: "product/collect_list",
        data: {
          pagesize: 6,
          p: this.p,
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("收藏产品:", data);
          if (data.status == 1) {
            let info = data.info;
            if (this.p <= info.total_page) {
              this.productlist = this.productlist.concat(info.list);
            }
          }
        }
      });
    }
  },
  watch: {
    $route() {
      // console.log("监听");
      // this.productlist = [];
      // this.p = 0;
      // this.product_list();
    }
  },
  created() {
  },
  activated() {
    if(localStorage.getItem('user_type') == 0){
      this.is_user = true
    }
    this.productlist = [];
    this.p = 0;
    this.product_list();
  }
};
</script>

<style scoped lang="scss">
.prdtItem-wrapper {
  color: $c-mainC;

  background-color: $c-white-light;

  padding: 0;

  margin-top: 0.15rem;

  width: 100%;

  text-align: center;

  .item-title {
    font-size: 0.32rem;

    width: 80%;

    margin: auto;

    text-align: center;
  }

  .item-wrapper {
    width: 100%;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: space-between;

    text-align: left;
  }

  .item-box {
    margin: 0rem 0 0.1rem;

    width: 3.46rem;

    .img-wrap {
      width: 100%;

      height: 2.37rem;

      overflow: hidden;

      position: relative;

      border-radius: 0.1rem;

      .ad-img {
        @extend .cmm-translateXY;
        width: 100%;
        height: 100%;
      }
    }

    $letHeight: 0.52rem;

    .bottom-info {
      @extend .cmm-clearfix;
      line-height: 0.52rem;

      margin-top: 0.14rem;

      .box-l {
        width: 100%;

        float: none;
      }

      .box-r {
        width: 50%;

        float: right;
      }

      .item-title {
        p {
          width: 100%;

          font-size: 0.26rem;

          line-height: 0.52rem;

          text-align: left;
        }
      }
    }

    .item-price {
      p {
        font-size: 0.32rem;

        color: $c-themeC;

        text-align: right;

        line-height: $letHeight;

        letter-spacing: -0.01rem;
      }

      span {
        display: inline-block;

        line-height: 0.52rem;

        float: left;
      }

      .icon {
        font-size: 0.4rem;

        margin-right: 0rem;
      }
    }

    .bottom-feature {
      padding: 0 0.1rem;
      height: $letHeight;
      line-height: $letHeight;
      .box-l {
        width: 50%;

        float: left;

        p {
          color: $c-mainC;

          font-size: 0.22rem;

          white-space: nowrap;

          letter-spacing: -0.02rem;

          * {
            vertical-align: middle;

            display: inline-block;
          }

          span {
            line-height: 0.52rem;
          }
        }

        .icon {
          font-size: 0.28rem;

          color: $c-themeC;

          font-weight: bold;
        }
      }

      .box-r {
        width: 50%;

        text-align: right;

        float: right;

        p {
          display: inline-block;

          line-height: $letHeight;

          white-space: nowrap;

          letter-spacing: -0.02rem;

          * {
            vertical-align: middle;

            display: inline-block;

            letter-spacing: -0.02rem;
          }
        }

        .like-txt {
          width: 50%;

          float: left;
        }

        .collect-txt {
          width: 50%;

          float: left;
        }

        p {
          span {
            line-height: 0.52rem;
          }
        }

        .icon {
          line-height: 0.52rem;

          display: inline-block;

          font-size: 0.4rem;

          font-size: 0.28rem;

          color: $c-themeC;

          font-weight: bold;
        }

        .num-txt {
          color: $c-mainC;

          font-size: 0.22rem;

          line-height: 0.52rem;
        }
      }
    }

    .bottom-cart {
      padding: 0 0.1rem;
      .box-l {
        width: 70%;

        float: left;
      }

      .box-r {
        width: 30%;

        float: right;
      }

      .item-price {
        text-align: left;

        vertical-align: top;

        * {
          vertical-align: top;
        }
      }

      .item-cart {
        text-align: right;
        display: none;
        vertical-align: top;

        * {
          vertical-align: top;
        }

        .icon {
          font-size: 0.4rem;

          color: $c-themeC;
        }
      }
    }
  }

  .submit-btn {
    width: 6.26rem;

    border-radius: 0.8rem;

    background-color: $c-themeBg;

    font-size: 0.36rem;

    font-weight: normal;

    color: $c-white-light;

    $letHeight: 0.8rem;

    height: $letHeight;

    line-height: $letHeight;

    text-align: center;

    margin: 0.78rem auto;

    display: inline-block;
  }
}

.prdtItem-wrapper.hot-item {
  padding: 0.24rem 0.2rem;

  .item-title {
  }

  .item-box {
    margin: 0rem auto 0.1rem;

    width: 100%;

    .img-wrap {
      height: 3rem;

      .ad-img {
      }
    }

    $letHeight: 0.52rem;

    .bottom-info {
      margin-top: 0.18rem;

      background-color: $c-gray-dark;

      .box-l {
        width: 50%;

        float: left;
      }

      .box-r {
      }

      .item-title {
        p {
          @extend .cmm-txtOverflow;

          line-height: $letHeight;
        }
      }
    }

    .item-price {
      p {
      }

      span {
        float: none;
      }

      .icon {
        font-size: 0.36rem;

        margin-right: -0.1rem;
      }
    }

    .bottom-feature {
      .box-l {
        p {
          letter-spacing: 0;

          * {
          }

          span {
            letter-spacing: 0;
          }
        }

        .icon {
          font-size: 0.36rem;
        }
      }

      .box-r {
        p {
          letter-spacing: 0px;

          * {
            letter-spacing: 0px;
          }
        }

        .like-txt {
          width: 30%;

          float: none;
        }

        .collect-txt {
          width: 30%;

          float: none;
        }

        p {
          span {
          }
        }

        .icon {
        }

        .num-txt {
        }
      }
    }
  }
}
</style>
